<template>
  <view class="good-item">
    <view class="left">
      <label>
        <radio :checked="item.goods_state" value="" style="transform:scale(0.8)" class="radio" v-if="showRadio"
          @click="handlers" />
      </label>
      <image :src="item.goods_small_logo"></image>
    </view>
    <view class="right">
      <text class="good-name" @click="gotoGoodDetail(item)">{{item.goods_name}}</text>
      <view class="good-money">
        <view class="good-price">
          ￥{{item.goods_price.toFixed(2)}}
        </view>
        <uni-number-box min="1" @change="changeValue" v-if="showNum" :value="item.goods_count" />
      </view>
    </view>
  </view>

</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  export default {
    name: "my-goods",
    props: {
      item: {
        type: Object,
        default: {}
      },
      //是否展示图片左侧的radio
      showRadio: {
        type: Boolean,
        default: false
      },
      //是否展示右侧商品数量
      showNum: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('cart', ['updateGoodsNum']),

      handlers() {
        this.$emit('radio-change', {
          goods_id: this.item.goods_id,
          goods_state: !this.item.goods_state
        })
      },

      //value 是当前的最新值   + | - 按钮的处理函数
      changeValue(value) {
        //调用vuex中函数，进行处理，然后保存在state和本地存储
        this.updateGoodsNum({
          goods_id: this.item.goods_id,
          goods_count: +value
        })
      },

      //点击购物车中商品可以去到详情页
      gotoGoodDetail(item) {
        uni.navigateTo({
          url: `/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`
        })
      },


    }
  }
</script>

<style lang="scss">
  .good-item {
    display: flex;
    margin: 10px 5px;

    .left {
      margin-right: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & image {
        width: 100px;
        height: 100px;
      }
    }

    .right {
      font-size: 12px;
      position: relative;

      .good-money {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        align-items: center;

        .good-price {
          color: red;
          font-weight: bold;
          font-size: 14px;
          bottom: 10px;
          left: 0;
        }
      }
    }
  }
</style>
